import React from 'react';
import { Link, Switch, Route } from 'react-router-dom';
import Detail from './Detail';
export default class Message extends React.Component {
  state = {
    messageArr: [
      { id: '01', title: 'message001' },
      { id: '02', title: 'message002' },
      { id: '03', title: 'message003' }
    ]
  };
  replaceShow = (id, title) => {
    return () => {
      // params方式
      // this.props.history.replace(`/home/message/detail/${id}/${title}`);
      
      // search方式
      // this.props.history.replace(`/home/message/detail/?id=${id}&title=${title}`);
      
      // state方式
      this.props.history.replace('/home/message/detail/' ,  {id: id, title: title});
    };
  };

  pushShow = (id, title) => {
    // params方式
    // this.props.history.push(`/home/message/detail/${id}/${title}`)
  
    // search方式
    // this.props.history.push(`/home/message/detail/?id=${id}&title=${title}`);

    // state方式
    this.props.history.push('/home/message/detail/' ,  {id: id, title: title});
  }

  go = () => {
    this.props.history.go(2);
  }

  goBack = () => {
    this.props.history.goBack();
  }

  goForWard = () => {
    this.props.history.goForward();
  }

  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map(message => {
            return (
              <li key={message.id}>
                {/* 不需要高亮使用Link */}

                {/* 向路由组件传递params参数 */}
                <Link to={`/home/message/detail/${message.id}/${message.title}`}>{message.title}</Link>
                <button onClick={()=> this.pushShow(message.id, message.title)}>push查看</button>&nbsp;
                <button onClick={this.replaceShow(message.id, message.title)}>replace查看</button>&nbsp;

                {/* 向路由组件传递search参数 */}
                {/* <Link to={`/home/message/detail/?id=${message.id}&title=${message.title}`}>{message.title}</Link> */}

                {/* 向路由组件传递state参数 */}
                {/* <Link replace to={{ pathname: '/home/message/detail', state: { id: message.id, title: message.title } }}>{message.title}</Link> */}
              </li>
            );
          })}
        </ul>
        <Switch>
          {/* 声明接收params参数 */}
          {/* <Route path="/home/message/detail/:id/:title" component={Detail}></Route> */}

          {/* search和state参数无需声明 */}
          <Route path="/home/message/detail" component={Detail}></Route>
        </Switch>
        <div>
          <button onClick={this.go}>go</button>&nbsp;
          <button onClick={this.goBack}>goBack</button>&nbsp;
          <button onClick={this.goForWard}>goForWard</button>
        </div>
      </div>
    );
  }
}
